<template>
    <div class="preview-office">
        <iframe :src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`" frameborder="0"
            @load="$emit('load')" @error="onError"></iframe>
        <div v-if="loadError" class="office-error">
            <p>Office文档预览加载失败，可能由于网络或服务问题。</p>
            <el-button type="primary" @click="$emit('download')">下载文件</el-button>
        </div>
    </div>
</template>

<script setup>
defineProps({
    file: {
        type: Object,
        required: true
    },
    url: {
        type: String,
        required: true
    },
    loadError: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['load', 'error', 'download'])

const onError = (e) => {
    emit('error', e)
}
</script>

<style scoped>
.preview-office {
    width: 100%;
    height: 100%;
    border: none;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.preview-office iframe {
    width: 100%;
    height: 100%;
    border: none;
    flex: 1;
}

.office-error {
    text-align: center;
    padding: 40px 20px;
    color: #f56c6c;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.office-error p {
    margin: 10px 0;
}
</style>